import { FC, useEffect, useRef } from "react"
import {
    AxesHelper, PerspectiveCamera,
    PointLight, Scene, WebGLRenderer, AmbientLight, Vector3, Box3
} from "three"
import {
    TubeModel
} from "R/models";
import { OrbitControls } from "three/examples/jsm/Addons.js";
import { GUI } from "dat.gui";
// 椭圆点位置
const lightPosition = new Vector3(60, 80, 100)

const Page: FC = () => {
    const container = useRef<HTMLCanvasElement>(null);
    // 基本对象
    useEffect(() => {
        const bodyele = document.body;
        const renderer = new WebGLRenderer({ canvas: container.current! }),
            camera = new PerspectiveCamera(90, bodyele.clientWidth / bodyele.clientHeight, 1, 1000),
            scene = new Scene(),
            pointLight = new PointLight(0xffffff, 10),
            axesHelper = new AxesHelper(100);
        renderer.setClearAlpha(.4)
        const gui = new GUI()


        pointLight.position.copy(lightPosition)
        pointLight.decay = 0
        scene.add(
            new AmbientLight(0xffffff, 1),
            axesHelper,
            pointLight,
            TubeModel
        )


        const box3 = new Box3()
        box3.expandByObject(TubeModel)
        const center = new Vector3()
        box3.getCenter(center)
        TubeModel.position.sub(center)
        // axesHelper.position.copy(center)
        camera.position.set(15, 14, 13)
        camera.lookAt(TubeModel.position)
        const orbitControls = new OrbitControls(camera, renderer.domElement)
        orbitControls.minDistance = 10
        orbitControls.maxDistance = 100

        // orbitControls.minPolarAngle = 0
        orbitControls.maxPolarAngle = Math.PI/2
        const size = new Vector3()
        box3.getSize(size)
        renderer.setSize(bodyele.clientWidth * devicePixelRatio, bodyele.clientHeight * devicePixelRatio)
        function roun(t?: number) {
            renderer.render(scene, camera)
            requestAnimationFrame(roun)
        }
        roun()
        return () => {
            gui.destroy()
            renderer.dispose()
        }
    }, [])
    return <canvas ref={container}></canvas>
}
export default Page